<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <uni-section title="物料质检" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <!-- 质检模块 -->
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 0 } })">
            <uni-icons type="checkbox" size="30"></uni-icons>
            <text class="text">入库质检</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 1 } })">
            <uni-icons type="compose" size="30"></uni-icons>
            <text class="text">出库质检</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 2 } })">
            <uni-icons type="list" size="30"></uni-icons>
            <text class="text">质检方案</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <!-- 宫格组件 -->
    <uni-section title="产品质检" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <!-- 质检模块 -->
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 3 } })">
            <uni-icons type="checkbox" size="30"></uni-icons>
            <text class="text">入库质检</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 4 } })">
            <uni-icons type="paperclip" size="30"></uni-icons>
            <text class="text">出库质检</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 5 } })">
            <uni-icons type="gear" size="30"></uni-icons>
            <text class="text">质检方案</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <uni-section title="安全培训模块" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <!-- 质检模块 -->
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 6 } })">
            <uni-icons type="star" size="30"></uni-icons>
            <text class="text">培训考试</text>
          </view>
        </uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box" @click="changeGrid({ detail: { index: 7 } })">
		    <uni-icons type="calendar" size="30"></uni-icons>
		    <text class="text">培训计划</text>
		  </view>
		</uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 8 } })">
            <uni-icons type="color" size="30"></uni-icons>
            <text class="text">培训记录</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <uni-section title="设备模块" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <!-- 质检模块 -->
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 9 } })">
            <uni-icons type="phone" size="30"></uni-icons>
            <text class="text">维修通知</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 10 } })">
            <uni-icons type="loop" size="30"></uni-icons>
            <text class="text">维护通知</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 11 } })">
            <uni-icons type="bars" size="30"></uni-icons>
            <text class="text">维护计划</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 12 } })">
            <uni-icons type="help" size="30"></uni-icons>
            <text class="text">设备报修</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 13 } })">
            <uni-icons type="navigate" size="30"></uni-icons>
            <text class="text">维修派遣</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 14 } })">
            <uni-icons type="redo" size="30"></uni-icons>
            <text class="text">维修记录</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>

    <uni-section title="生产模块" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <!-- 质检模块 -->
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 15 } })">
            <uni-icons type="bars" size="30"></uni-icons>
            <text class="text">生产计划</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 16 } })">
            <uni-icons type="folder-add" size="30"></uni-icons>
            <text class="text">维修记录</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 17 } })">
            <uni-icons type="refresh" size="30"></uni-icons>
            <text class="text">设备维护</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box" @click="changeGrid({ detail: { index: 18 } })">
            <uni-icons type="more" size="30"></uni-icons>
            <text class="text">维护记录</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      data: [{
          image: '/static/images/banner/banner01.jpg'
        },
        {
          image: '/static/images/banner/banner02.jpg'
        },
        {
          image: '/static/images/banner/banner03.jpg'
        }
      ],
      modulePaths: {
        0: '/pages/inventory-inspection/inventory-inspection',
        1: '/pages/outbound-inspection/outbound-inspection',
        2: '/pages/inspection-scheme/inspection-scheme',
        3: '/pages/product-inventory-inspection/product-inventory-inspection',
        4: '/pages/product-outbound-inspection/product-outbound-inspection',
        5: '/pages/product-inspection-scheme/product-inspection-scheme',
        6: '/pages/training-exam/training-exam',
        7: '/pages/examPlan/index',
        8: '/pages/examScores/index',
        9: '/pages/maintenance-notification/maintenance-notification',
        10: '/pages/maintenance-notification/maintenance-notification',
        11: '/pages/maintenance-plan/maintenance-plan',
        12: '/pages/equipment-repair/equipment-repair',
        13: '/pages/dispatch-repair/dispatch-repair',
        14: '/pages/repair-record/repair-record',
        15: '/pages/production-plan/production-plan',
        16: '/pages/repair-record/repair-record',
        17: '/pages/equipment-maintenance/equipment-maintenance',
        18: '/pages/maintenance-record/maintenance-record'
      }
    }
  },
  methods: {
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },
    changeGrid(e) {
      const index = e.detail.index;
      const path = this.modulePaths[index];
      if (path) {
        uni.navigateTo({
          url: path
        });
      } else {
        this.$modal.showToast('模块建设中~')
      }
    }
  }
}
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}

view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  background-color: transparent; /* 设置背景颜色为透明 */
  border-radius: 0; /* 移除边框半径 */
  margin: 10rpx;
  box-shadow: none; /* 移除阴影 */
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}
</style>
